<template>

  <!--系统管理--机构类型权限管理-->
  <div class="content-area institutional-type-authority-manage">
    <!-- 位置模块 -->
    <HeadTop></HeadTop>
    <div class="manage-content">

      <div class="content-info">
        <el-table :empty-text="parentLoad" :data="dataTableObj.tableData" stripe
                  header-row-class-name="th-color">
          <!-- 放置只读数据  -->
          <el-table-column v-for="(column, key, index) in dataTableObj.tableColumns" :key="column.id"
                           :prop="column.attributeName"
                           align="center" :label="column.text" :show-overflow-tooltip="true" :min-width="column.width">
          </el-table-column>
          <el-table-column fixed="right" align="center" label="操作" width="150">
            <template slot-scope="scope">
              <div class="item-route">
                <div class="item-route-link" @click="showEditDialog(scope.row.value)">权限编辑</div>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>

    </div>
    <dialogPowerSet ref="dialogPower" v-on:backstageNeedPower="setPower"></dialogPowerSet>
  </div>
</template>
<script>
  // 表格数据
  import DataTable from "../../../components/dataTable/dataTable"
  import com from "../../../js/common"

  import HeadTop from "../../../components/head-top/head-top"
  import {getOrganTypeList, updateOrganRbac, getOrganTypeRbac} from '@/api/getData'

  import dialogPowerSet from "../../../components/dialogPowerSet/dialogPowerSet"

  export default {
    name: 'rbacManage',
    components: {
      DataTable,
      HeadTop,
      dialogPowerSet
    },
    data() {
      return {
        parentLoad: "加载中...",
        // 选中修改数据
        institutionalType: 0,
        // 表格数据
        dataTableObj: {
          tableData: [],
          tableColumns: [
            {
              text: '序号',
              width: '60',
              attributeName: 'index'
            },
            {
              text: '名称',
              width: '150',
              attributeName: 'key'
            },
            {
              text: '描述',
              width: '400',
              attributeName: 'desc'
            },
          ]
        }
      }
    },
    mounted() {
      // 获取当前页面所需数据
      this.getPageData()
    },
    methods: {
      getPageData() {
        this.getInstitutionTypeArr()
      },
      // 获取机构类型
      getInstitutionTypeArr() {
        let self = this
        getOrganTypeList({}).then((data) => {
          let infoArr = data.data.data
          if (infoArr.length > 0) {
            this.dataTableObj.tableData = data.data.data.map((i, index) => {
              return Object.assign(i, {
                index: index + 1,
                desc: i.key + '的描述',
              })
            })
          } else {
            self.parentLoad = '暂无数据'    // loading(暂无数据)
          }

        }).catch(function (data) {
          self.$message.error(data.data.message)
          self.parentLoad = data.data.message    // loading(查询失败)
        })
      },
      // 改变选中机构
      setPower(backNeedPower) {
        let params = {}
        params.type = this.institutionalType
        params.ids = backNeedPower
        updateOrganRbac(params).then((res) => {
          com.mask()
          this.$message.success({
            message: '修改成功',
            duration: 1500,
            onClose: () => {
              com.unmask()
              this.$refs.dialogPower.hideDialog()
            }
          })
        }).catch((err) => {
          this.$message.error(err.data.message)
          this.$refs.dialogPower.hideDialog()
        })
      },
      // 显示编辑
      showEditDialog(key) {
        this.institutionalType = key
        this.getInstitutionAuthorityTreeData(key)
      },

      // 获取机构类型对应权限树
      getInstitutionAuthorityTreeData(val) {
        let param = {}
        param.type = val
        getOrganTypeRbac(param).then((res) => {
          // 遍历数组,组成权限树

          const authorityArr = res.data.data

          this.$refs.dialogPower.getEleNeedPower(authorityArr)

        }).catch(err => this.$message.error(err.data.message))
      },
      reload() {
        com.reload(this)
      }
    }
  }
</script>
<style lang="scss" type="text/scss">
  @import "../../../style/entry/components/pageCommon";

  .institutional-type-authority-manage {
    .manage-header {
      display: flex;
      align-items: center;
      height: 40px;
      line-height: 40px;
      flex-shrink: 0;
      margin-bottom: 10px;
      background: #fff;
      padding-left: 30px;
      font-size: 14px;
      justify-content: space-between;
      button {
        width: 70px;
        height: 30px;
        line-height: 30px;
        border-radius: 4px;
        border: solid 1px #234A78;
        color: #234A78;
      }
    }
    .authority-manage-tree {
      height: 300px;
      overflow: auto;
    }
  }
</style>
